<template>
  <PageContainer>
    <view class="container">
      <Header title="申请审核">
        <view class="tabs-box" :style="{ top: headerHeight + 'px' }">
          <view class="tab">
            <Tabs v-model="currentTab" background-color="#FFF" :isScrollTop="false">
              <TabNav tabBarColor="#2878FF" />
              <template v-if="tabsData?.length">
                <TabsItem
                  v-for="(item, index) in tabsData"
                  @click="handleTabClick"
                  :key="index"
                  :name="item.title"
                  :value="item.id"
                  :unread="item.unread"
                ></TabsItem>
              </template>
            </Tabs>
          </view>
          <view class="search-box">
            <view class="t-search-box">
              <TSearch @confirm="handleTSearch" placeholder="搜索姓名/单位"></TSearch>
            </view>
          </view>
        </view>
      </Header>
      <!-- <view v-if="currentTab" class="tips">
        <text class="ali-icon icon-tips" style="font-size: 32rpx"></text>
        <text class="tip-text">列表仅展示待审核、取消成功的，驳回的申请不显示</text>
      </view> -->
      <Paglist
        v-model="dataList"
        :is-init-api="false"
        :parame="parame"
        @register="register"
        :scroll-top-bottom="260"
        :is-show-loadmore="dataList.length >= 1"
        :isPullDownRefres="false"
      >
        <template v-for="v in dataList" :key="v.id">
          <view class="content">
            <ExaminePresonItem
              :data="v"
              :currentTab="currentTab"
              @click="handlePresonItemClick(v)"
              @refresh="refresh"
              @show-printer-popup="handleShowPrinterPopup(v)"
            ></ExaminePresonItem>
          </view>
        </template>
      </Paglist>
      <SelectPrinter v-if="activityId" ref="selectPrinterRef" :activity-id="activityId" />
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /* applyForExamine 申请审核 */
  import Header from '@/components/Header/index.vue';
  import PageContainer from '@/components/PageContainer/index.vue';
  import Tabs from '@/components/tabs/index.vue';
  import TabsItem from '@/components/tabs/item.vue';
  import TabNav from '@/components/tabs/nav.vue';
  import TSearch from '@/components/TSearch/index.vue';
  import { provide, ref } from 'vue';
  import ExaminePresonItem from '../components/ExaminePresonItem.vue';
  import { navigateTo, onLoad } from '@/router';
  import {
    getAuditCount,
    getActivityRegisterList,
    getRegisterRefundApplyPage,
  } from '@/api/activity';
  import SelectPrinter from '../../../components/SelectPrinter.vue';
  import type { IActivityRegister, IActivityRegisterQuery } from '@/api/activity/types';
  import Paglist from '@/components/Paglist/index.vue';
  import { useConList } from '@/components/Paglist/useConList';
  import { ApprovalStatusEnum, SignStatusEnum, ActivityTypeEnum } from '@/enums/activityStatusEnum';
  import { onPageScroll, onPullDownRefresh } from '@dcloudio/uni-app';
  import type { FunctionArgs } from '@vueuse/core';

  const activityId = ref<number>();
  let success: FunctionArgs | null = null;
  onLoad<'applyForExamine'>((op) => {
    activityId.value = op.activityId;
    parame.value.activityId = op.activityId;
    success = op.success;
    queryAuditCount();
    refresh();
  });

  const headerHeight = ref(0);

  // 统计

  const currentTab = ref(0);
  const tabsData = ref<
    {
      title: string;
      id: number;
      unread: number;
      queryData: { approvalStatus: number | undefined };
    }[]
  >([
    {
      title: '报名待审核',
      id: 0,
      unread: 0,
      queryData: {
        approvalStatus: ApprovalStatusEnum.UNDERREVIEW,
      },
    },
    {
      title: '取消待审核',
      id: 1,
      unread: 0,
      queryData: {
        approvalStatus: ApprovalStatusEnum.CANCELING,
      },
    },
  ]);
  // 列表

  const [register, { refresh }] = useConList();
  const dataList = ref<IActivityRegister[]>([]);
  const parame = ref<IActivityRegisterQuery>({
    activityId: 0,
    keyWord: '',
    approvalStatus: ApprovalStatusEnum.UNDERREVIEW,
  });

  const handleTSearch = (keyWord: string) => {
    parame.value.keyWord = keyWord;
    refresh();
  };

  const handleTabClick = () => {
    const { approvalStatus } = tabsData.value![currentTab.value].queryData;
    parame.value.approvalStatus = approvalStatus;
    parame.value.identity = undefined;
    refresh();
  };

  const queryAuditCount = async () => {
    const res = await getAuditCount(activityId.value!);
    tabsData.value[0].unread = res.waitingReviewNum;
    tabsData.value[1].unread = res.cancelRegisterNum;
  };

  provide('api', async (obj: IActivityRegisterQuery) => {
    if (currentTab.value) {
      const res = await getRegisterRefundApplyPage(obj);
      return res;
    } else {
      const res = await getActivityRegisterList(obj);
      return res;
    }
  });

  // 审核

  const handlePresonItemClick = (v: IActivityRegister) => {
    if (currentTab.value) {
      navigateTo({
        name: 'refundExamineDetail',
        options: {
          registerId: v.id as number,
          success: () => {
            refresh();
            success?.();
            queryAuditCount();
          },
        },
      });
    } else {
      navigateTo({
        name: 'signUpDetail',
        options: {
          activityRegister: { ...v, activityId: activityId.value as number },
          success: () => {
            refresh();
            success?.();
            queryAuditCount();
          },
        },
      });
    }
  };

  const selectPrinterRef = ref<{ show: (registerId: number) => void }>();
  function handleShowPrinterPopup(item: IActivityRegister) {
    selectPrinterRef.value?.show(item.id);
  }
  onPageScroll(() => {});
  onPullDownRefresh(async () => {
    await refresh();
  });
</script>

<style lang="scss" scoped>
  .container {
    min-height: 100vh;
    .tips {
      background-color: #fff4e7;
      display: flex;
      align-items: center;
      gap: 16rpx;
      padding: 20rpx 32rpx;
      color: #e29942;
      .tip-text {
        font-size: 28rpx;
        line-height: 40rpx;
      }
    }
    .tabs-box {
      background-color: #ffffff;
      .search-box {
        display: flex;
        gap: 32rpx;
        justify-content: space-between;
        align-items: center;
        padding: 24rpx 32rpx;

        .t-search-box {
          height: 72rpx;
          flex: 1;
        }
      }
    }

    .nav-box {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      background-color: #ffffff;
      padding: 16rpx 32rpx;
      & > view {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12rpx;
        padding: 16rpx 0;
        position: relative;
        .text {
          color: #323233;
          font-size: 24rpx;
          font-weight: 400;
          line-height: 32rpx;
        }
        .badge-dot {
          position: absolute;
          top: -10rpx;
          right: 20%;
          width: 44rpx;
          height: 44rpx;
          background-color: #ea5e0e;
          color: #fff;
          border-radius: 50%;
          text-align: center;
          line-height: 44rpx;
          font-size: 24rpx;
          box-shadow: 2rpx 2rpx 2rpx 0px rgba(0, 0, 0, 0.2);
          &__max {
            border-radius: 24rpx;
            width: auto;
            padding: 0 8rpx;
          }
        }
      }
    }
    ::v-deep .list-box {
      display: flex;
      flex-direction: column;
      padding: 24rpx;
      gap: 16rpx;
    }
  }
</style>
